<template>
  <tr>
    <td><input type="checkbox" :checked="item.checked" @change="changeChecked(item.name)"/></td>
    <td>{{item.name}}</td>
    <td>{{item.price}}</td>
    <td>
      <div>
        <button @click="changenum(-1)">-</button>
        <span>{{item.num}}</span>
        <button @click="changenum(1)">+</button>
      </div>
    </td>
    <td>{{item.price*item.num}}</td>
    <td><button @click="delItem(item.name)">删除</button></td>
  </tr>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: ['item'],
  methods: {
    ...mapMutations('cart', ['changeChecked', 'delItem']),
    changenum (n) {
      const newNum = this.item.num + n
      if (newNum < 1) return
      this.$store.commit('cart/changeNum', {
        name: this.item.name,
        num: newNum
      })
    }
  }
}
</script>

<style></style>
